<template>
	<view class="content-box">
		<!-- 空日程 -->
		<view class="top" v-if="!(hasDaynote && hasLogin)">
			<view class="title">
				您最近还没有创建日程
			</view>
			<view>
				<!-- 未授权 -->
				<button v-if="!hasLogin" class="add-button" type="default" open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true"></button>
				<!-- 授权后 -->
				<button v-if="hasLogin" class="add-button" type="default" @click="addNewDaynote"></button>
			</view>
		</view>
		
		<!-- 日程列表 -->
		<!-- 此种样式处理无法通过 -->
		<!-- <scroll-view v-if="hasDaynote" scroll-y="true" @scrolltolower="reachBottom" :style="{scroll_style}"> -->
		<scroll-view v-if="hasDaynote && hasLogin" scroll-y="true" @scrolltolower="reachBottom" :style="{height:scroll_view_height}">
			<view class="page-box">
				<view class="daynote" v-for="(daynoetItem, index) in daynoteList" :key="daynoetItem.id" >
					<view class="top-block">
						<view class="daynote-content u-line-2">{{ daynoetItem.content }}</view>
					</view>
					<view class="mid-block">
						<u-icon name="clock" color="rgb(203,203,203)" :size="40"></u-icon>
						<view class="rtime">{{ daynoetItem.rtime }}</view>
					</view>
					<u-line color="#e4e7ed" />
					<view class="bottom-block">
						<view class="del-note btn" @click="delDaynote" :data-did="daynoetItem.id" :data-dindex="index">删除</view>
						<view class="edit-note btn" @click="updateDaynote" :data-did="daynoetItem.id">编辑</view>
					</view>
				</view>
				
				<u-loadmore :status="loadStatus" :load-text="loadText" bg-color="#f5f5f5"></u-loadmore>
			</view>
		</scroll-view>

		<view class="bottom-btn">
			<!-- 未授权 -->
			<button v-if="!hasLogin" class="bottom-add-button" type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true">创建新日程</button>
			<!-- 授权后 -->
			<button v-if="hasLogin" class="bottom-add-button" type="primary" @click="addNewDaynote">创建新日程</button>
		</view>
	</view>
</template>

<script>
/* *
 * 页面流程：
 * onLoad()
 * 1. 检测storage中是否存在hasLogin和JWT，若为真，则执行2。
 * 	1.1 若为假，则认为第一次登录，需要点击新增日程按钮，通过@getuserinfo="getUserInfo"获取用户信息，并调用uni.login()从第三方获取code；
 *  1.2 获取code后向服务器发送异步请求，换取JWT并存储在storage中，执行3。
 * 2. 向服务器发生同步请求，检查JWT状态，若为真，则执行3。
 *  2.2 若为假，则调用uni.getUserInfo()，重新换取JWT，换取后更新storage中的值，执行3。
 * watch()
 * 3. 监听hasLogin的状态，若为真，则执行4；若为假，则不执行。
 * 4. 设置scroller-view的高度，向服务器发送异步请求，请求日程数据，若有数据，则设置hasDaynote为true，并更新数据，渲染scroll-view。
 * 
 * 5. 从新增页面成功返回后，新增页面通过
 * pages=getCurrentPages();
 * prevPage = pages[pages.length - 2];
 * prevPage.reloadFlag = true;
 * 设置本页面的重载标识为true，返回当前页后，当前页在onShow()周期通过
 * let pages = getCurrentPages();
 * let currPage = pages[pages.length-1];
 * if(currPage.reloadFlag != undefined && currPage.reloadFlag){
 * self.resetDayNoteList();
 * }
 * 进行页面刷新和数据重载
 * 
 * 6. 删除某个日程后，通过self.daynoteList.splice()，删除指定数据节点，数据自动更新；
 * 若删除当前页所有日程后，则self.resetDayNoteList()重载数据。
 */
import { mapState } from 'vuex'

var getDayNoteListUrl = getApp().globalData.getDayNoteListUrl;
var delDayNoteActionUrl = getApp().globalData.delDayNoteActionUrl;

export default {
	computed: mapState(['hasLogin']),
	data() {
		return {
			hasDaynote: false,
			daynoteList: [],
			curPage: 1,
			nextPage: 1,
			lastPage: 1,
			// loadmore组件
			loadStatus: 'loadmore',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '已经到尽头了'
			},
			// scroll-view 样式
			scroll_view_height: '500rpx',
			// scroll_style: {
			// 	height: '500rpx',
			// 	paddingBottom: '110rpx'
			// }
		}
	},
	created() {
		self = this;
	},
	// 监听登录状态的变化，获取列表
	watch:{
		hasLogin: (val) => {
			console.log('watch hasLogin status');
			if(val){
				self.setDayNoteList();
			}
		}
	},
	onLoad: async () =>{
		// 检查登录状态
		// 待定：如何将该函数放到全局执行，使所有页面加载前都检测登录状态
		self.checkhasLoginAction();
		await self.checkJwtAction();
		
		// 设置scroll-view高度
		var widownPxData = self.$customCommon.customCommonObj.getWindowWidthHeightPx();
		self.scroll_view_height = (widownPxData.height_rpx - 110 + 'rpx');
	},
	onShow: () => {
		// 从新增页面回来，进行刷新
		let pages = getCurrentPages();
		let currPage = pages[pages.length-1];
		// 方式一：无脑重载数据
		if(currPage.reloadFlag != undefined && currPage.reloadFlag){
			self.resetDayNoteList();
		}
		// }else{
		// 	// 方式二：将新数据push上去,此种方式对下拉刷新有缺陷，会加载重复数据
		// 	if(currPage.new_data != undefined){
		// 		if(self.daynoteList.length <= 0){
		// 			self.hasDaynote = true;
		// 		}
		// 		self.daynoteList.unshift(currPage.new_data);
		// 	}
		// }
		
	},
	methods:{
		// 用户授权和登录
		getUserInfo : (e) => {
			console.log('get userInfo first');
			// 调用main.js全局函数
			self.loginAction(e.detail.userInfo);
		},
		
		// 新增日程
		addNewDaynote : () => {
			uni.navigateTo({
				url: '/pages/daynote/index'
			})
		},
		
		// 编辑日程
		updateDaynote : (e) => {
			console.log('update daynote: ' + e.currentTarget.dataset.did);
			uni.navigateTo({
				url: '/pages/daynote/index?act=update&did=' + e.currentTarget.dataset.did,
			})
		},
				
		// 删除日程
		delDaynote : (e) => {
			console.log('delete daynote id: ' + e.currentTarget.dataset.did);
			//console.log('delete daynote index: ' + e.currentTarget.dataset.dindex);
			
			uni.request({
				url: delDayNoteActionUrl,
				method: 'POST',
				data: {
					act: 'del',
					did: e.currentTarget.dataset.did,
					jwt: uni.getStorageSync('userJWT')
				},
				success: (res) => {
					if(res.data.status == 250){
						self.showToastCustom(res.data.txt);
					}else{
						// 删除成功后删除数据节点
						self.daynoteList.splice(e.currentTarget.dataset.dindex, 1);
						// 删除所有之后的处理
						if(self.daynoteList.length <= 0){
							self.resetDayNoteList();
						}
					}
				},
				fail: (res) => {
					self.showToastCustom(res.errMsg);
				}
			})
		},
		
		// 重载数据
		resetDayNoteList : () => {
			console.log('reset Daynote data');
			self.nextPage = 1;
			self.daynoteList = [];
			self.setDayNoteList();			
		},
		
		// 页面数据
		setDayNoteList : () => {
			
			console.log('get Daynote data');
			
			self.loadStatus = 'loading';

			uni.request({
				url: getDayNoteListUrl,
				method: 'POST',
				data: {
					page: self.nextPage,
					jwt: uni.getStorageSync('userJWT')
				},
				success: (res) => {
					if(res.data.status == 200){
						var dataList = res.data.data.data;
						if(dataList.length > 0){
							// 设置页数
							self.hasDaynote = true;
							self.curPage  = parseInt(res.data.data.current_page);
							self.nextPage = self.curPage + 1;
							self.lastPage = res.data.data.last_page;
							// push数据
							for(var i=0;i<res.data.data.data.length;i++){
								self.daynoteList.push(res.data.data.data[i]);
							}
							//console.log(self.daynoteList)
						}else{
							self.hasDaynote = false;
						}
						self.loadStatus = 'loadmore';
					}else{
						self.showToastCustom(res.data.txt);
						self.loadStatus = 'loadmore';
					}
				},
				fail: (res) => {
					self.showToastCustom(res.errMsg);
				}
			});
		},
		
		// 上拉加载
		reachBottom() {
			if(self.lastPage >= self.nextPage){
				self.setDayNoteList();
			}else{
				self.loadStatus = 'nomore';
			}
		},
		
	}
}
</script>

<style>
.content-box{
	padding-bottom: 110rpx;
}
.title {
	color: #8f8f94;
	margin-top: 33%;
	text-align: center;
}
.add-button-nav{
	width: 100rpx;
	height: 100rpx;
	margin: 0 auto;
	border-radius: 50%;		
}
.add-button{
	width: 100rpx;
	height: 100rpx;
	background-image: url('~@/static/img/addButton.png');
	background-size: contain;
	margin: 40rpx auto;
	border-radius: 50%;
}
.bottom-btn{
	width: 100%;
	position: fixed;
	bottom: 10rpx;
	left: 0rpx;
	z-index: 99;
}
.bottom-add-button{
	width: 95%;
	margin: 0 auto;
}
</style>

<style lang="scss" scoped>
.page-box{
	min-height: 600rpx;
}
.daynote {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	//border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top-block {
		display: flex;
		//margin: 20rpx 0 0;
		min-height: 100rpx;
		.daynote-content {
			line-height: 50rpx;
			font-size: 40rpx;
		}
	}
	.mid-block {
		display: flex;
		margin: 20rpx 0rpx;
		//justify-content: space-between;
		.rtime{
			font-size: 30rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #a1a1a1;
			padding-left: 10rpx;
		}
	}
	.bottom-block {
		display: flex;
		margin-top: 20rpx;
		padding: 0 10rpx;
		justify-content: flex-end;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
			margin-left: 20rpx;
		}
	}
}
</style>